<template>
	<view class="page_body">
		<!-- 导航栏 -->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子导航栏 -->
		<view class=""
			:style="{'height': hieght}"></view>
		<navBar bgColor="#FFF">
			<image :slot="'left'"
				@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">我的卡卷</text>
		</navBar>
		<!-- 选项卡 -->
		<view class="tabs">
			<u-tabs :current="current"
				lineColor='#EC4141'
				:activeStyle="{
					        color: '#EC4141',
							fontSize:'28rpx'
					}"
				:inactiveStyle="{
						color: '#333',
						fontSize:'28rpx'
					}"
				lineHeight='5'
				:list="list1"
				@click='selectTab'></u-tabs>
		</view>
		<!-- 优惠卷列表 -->
		<scroll-view scroll-y=""
			@scrolltolower="scrolltolower">

			<view class="content"
				v-for="(item,index) in orderList"
				:key="index">
				<view style="width:355px; height: 100px;"
					v-if="item.status == 1">
					<image class=""
						src="/static/newpic/couponList.svg"
						style="width: 100%;height: 100%;"></image>
				</view>
				<view style="width:355px; height: 100px;"
					v-if="item.status == 2 || item.status == 3">
					<image class=""
						src="/static/newpic/usedCoupon.svg"
						style="width: 100%;height: 100%;"></image>
				</view>
				<view class="list">
					<view class="content_left">
						<text style="font-size: 28rpx;">￥</text>
						<text style="font-size: 60rpx;font-weight: 800;">{{item.faceMoney}}</text>
					</view>
					<view class="content_right">
						<view class="content_title">
							<view class="content_title1">{{item.name}}</view>
							<view class="content_title2">{{item.condition}}</view>
							<view class="content_title3">有效期至:
								{{ item.overdueType == 1 ? Utils.DateFormateTime(item.endDate,'nyr') : item.overdueTime}}
							</view>
						</view>
						<view class="content_use"
							@click="toUse"
							v-if="item.status == 1">
							去使用
						</view>
						<view class="content_nouse"
							v-if="item.status == 2">
							<image class=""
								src="/static/newpic/used.svg"
								style="width: 100%;height: 100%;"></image>
						</view>
						<view class="content_nouse"
							v-if="item.status == 3">
							<image class=""
								src="/static/newpic/noUse.svg"
								style="width: 100%;height: 100%;"></image>
						</view>
					</view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import {
		getMyCouponList
	} from '@/api/global.js'
	export default {
		data() {
			return {
				overdueTime: '', //逾期天数
				current: 0,
				statusBarHeight: '',
				hieght: '',
				list1: [{
					name: '全部',
				}, {
					name: '待使用',
				}, {
					name: '已使用'
				}, {
					name: '已失效'
				}],
				pageData: {
					currentPage: 1,
					pageSize: 10
				},
				searchParams: {
					sort: 1,
					status: ''
				},
				lastPage: 0,
				orderList: [],
			}
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.hieght = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度

			})
			this.getList()
		},
		methods: {
			//获取列表
			async getList() {
				uni.showLoading()
				let res = await getMyCouponList({
					...this.searchParams,
					...this.pageData
				})
				if (res.code == 2000) {
					uni.hideLoading()
					console.log(res);
					if (this.pageData.currentPage == 1) {
						this.orderList = (res?.data?.info?.list || [])
					} else {
						this.orderList = this.orderList.concat(res?.data?.info?.list || [])
					}
					this.orderList = this.orderList.map(item => {
						return {
							...item,
							overdueTime: this.Utils.addDate(item.overdueDay)
						}
					})
					this.lastPage = res?.data?.info?.lastPage
					console.log(this.orderList, '优惠卷列表');
				}
			},
			//切换选项卡
			selectTab(item) {
				this.current = item.index
				console.log(item);
				if (item.index == 0) {
					this.searchParams.status = 0
				} else if (item.index == 1) {
					this.searchParams.status = 1;
				} else if (item.index == 2) {
					this.searchParams.status = 2;
					this.searchParams.mark = item.index;
				} else if (item.index == 3) {
					this.searchParams.status = 3;
				}
				this.pageData.currentPage = 1
				this.orderList = []
				this.getList()
			},
			// 去使用
			// toUse(){
			// 	uni.navigateTo({
			// 			     url: `/page_public/publicClass?title=${item.name}&type=${item.type}&tag=${item.tag}`
			// 				})
			// }

			//返回上个页面
			navToBack() {
				uni.switchTab({
					url: '/pages/myde/myde'
				})
			},
			//下拉加载
			scrolltolower() {
				this.pageData.currentPage++
				if (this.pageData.currentPage > this.lastPage) {
					return
				} else {
					// 获取单据列表
					this.getList()
				}
			}
		}
	}
</script>

<style lang="scss"
	scoped>
	.tabs {
		background-color: #fff;
		height: 80rpx;
	}

	//  .u-tabs__wrapper__nav__item {
	// 	padding: 0 54rpx !important;
	// }
	/deep/.u-tabs__wrapper__nav {
		width: 100%;
		background-color: #FFF;
	}

	/deep/.u-tabs__wrapper__nav__item {
		// flex: 1;
		background-color: #FFF;
		width: 25% !important;
		text-align: center;
		padding: 0 !important;
	}

	/deep/.u-tabs__wrapper__nav__line {
		// transform: translate(35.5px)!important;
		width: 160rpx !important;
		left: -8.5%;
	}

	.content {
		padding: 20rpx;
		margin-top: 14rpx;
		position: relative;

		.list {
			width: 710rpx;
			height: 200rpx;
			display: flex;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;

			.content_left {
				width: 200rpx;
				text-align: center;
				line-height: 192rpx;
				font-size: 60rpx;
				margin: 20rpx;
				color: #fff
			}

			.content_right {
				display: flex;

				.content_title {
					width: 170px;
					margin: 30rpx 0 30rpx 10rpx;

					.content_title1 {
						font-size: 30rpx;
						color: #333333;
						margin-top: 20rpx;
						font-weight: 700;
						width: 340rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.content_title2 {
						font-size: 24rpx;
						color: #808080;
						margin-top: 20rpx;
						width: 310rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.content_title3 {
						font-size: 20rpx;
						color: #808080;
						margin-top: 20rpx
					}
				}

				.content_use {
					width: 108rpx;
					height: 48rpx;
					background-color: #fb575c;
					border-radius: 48rpx;
					color: #fff;
					margin-top: 100rpx;
					font-size: 28rpx;
					text-align: center;
					line-height: 48rpx;
				}

				.content_nouse {
					width: 120rpx;
					height: 90rpx;
					margin-top: 90rpx;
				}
			}

		}
	}
</style>